<template>

  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="id" prop="id">
      <el-input v-model="ruleForm.id" disabled></el-input>
    </el-form-item>

    <el-row>
      <el-form-item prop="dataDate" class="search-card" label="数据日期">
        <el-date-picker
            v-model="ruleForm.dutydate"
            type="date"
            value-format="yyyy-MM-dd"
            class="dateInput"
            @change="dataDateChange"
            clearable
        ></el-date-picker>
      </el-form-item>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item prop="week" label="星期">
          <el-select class="formFrame" v-model="ruleForm.week" disabled>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>



    <!--    <el-form-item label="时间" required>-->
    <!--      <el-col :span="11">-->
    <!--        <el-form-item prop="date1">-->
    <!--          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.dutydate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>-->
    <!--        </el-form-item>-->
    <!--      </el-col>-->
    <!--      &lt;!&ndash;      <el-col class="line" :span="2">-</el-col>&ndash;&gt;-->
    <!--      &lt;!&ndash;      <el-col :span="11">&ndash;&gt;-->
    <!--      &lt;!&ndash;        <el-form-item prop="date2">&ndash;&gt;-->
    <!--      &lt;!&ndash;          <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>&ndash;&gt;-->
    <!--      &lt;!&ndash;        </el-form-item>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </el-col>&ndash;&gt;-->
    <!--    </el-form-item>-->
    <!--        <el-form-item label="星期" prop="week">-->
    <!--          <el-input v-model="ruleForm.week"></el-input>-->
    <!--        </el-form-item>-->

        <el-row>
        <el-form-item label="watcher" prop="watcher">
          <el-input v-model="ruleForm.watcher"  class="dateInput" @change="Change"></el-input>
        </el-form-item>
        </el-row>
    值班人员1：
    <el-form-item label="姓名"  >
      <el-input v-model="dash_watcher[0].name" ></el-input>
<!--      <el-input v-model="((JSON.parse(ruleForm.watcher))[0]).name" ></el-input>-->
    </el-form-item>
    <el-form-item label="邮箱" >
      <el-input v-model="dash_watcher[0].email"></el-input>
    </el-form-item>

    <el-form-item label="部门" >
      <el-select v-model="dash_watcher[0].position" placeholder="请选择部门">
        <el-option label="研发" value="研发"></el-option>
        <el-option label="运维" value="运维"></el-option>
      </el-select>
    </el-form-item>

    值班人员2：
    <el-form-item label="姓名" prop="name">
      <el-input v-model="dash_watcher[1].name"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="name">
      <el-input v-model="dash_watcher[1].email"></el-input>
    </el-form-item>
    <el-form-item label="部门" prop="region">
      <el-select v-model="dash_watcher[1].position" placeholder="请选择部门">
        <el-option label="研发" value="研发"></el-option>
        <el-option label="运维" value="运维"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <!--      <el-button @click="test()">test</el-button>-->
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      weeks: {
        "0":'星期日',
        "1":'星期一',
        "2":'星期二',
        "3":'星期三',
        "4":'星期四',
        "5":'星期五',
        "6":'星期六',
      },
      ruleForm: {
        id:'',
        dutydate: '12',
        week: '12',
        watcher:'12',
        name1:'',
        email1:'',
        position1:'',
        name2:'',
        email2:'',
        position2:''
      },
      dash_watcher:null
      // rules: {
      //   name: [
      //     { required: true, message: '请输入活动名称', trigger: 'blur' },
      //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      //   ],
      //   region: [
      //     { required: true, message: '请选择活动区域', trigger: 'change' }
      //   ],
      //   date1: [
      //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
      //   ],
      //   date2: [
      //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
      //   ],
      //   type: [
      //     { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
      //   ],
      //   resource: [
      //     { required: true, message: '请选择活动资源', trigger: 'change' }
      //   ],
      //   desc: [
      //     { required: true, message: '请填写活动形式', trigger: 'blur' }
      //   ]
      // }
    };
  },
  methods: {
    dataDateChange(dateStr) {
      alert(dateStr)
      let date = new Date(dateStr);
      let weekIndex = date.getDay();
      this.ruleForm.week = this.weeks[weekIndex];
    },
    Change(dateStr) {
      console.log(dateStr)
      alert(dateStr)
      let info=((JSON.parse(dateStr))[0]);
      this.ruleForm.name1 = info.name;
    },
    stateFormat(row, column) {
      alert(row)
      console.log(row)
      let info=((JSON.parse(row.watcher))[0]);
      return info.name;

      // return info.name+" "+info.position+" "+info.email;
    },
    submitForm(formName) {
      let data = this.ruleForm;
      let jsonObjList = [];
      let jsonObj1 = { name: "", email: "",position:"" };
      // jsonObj1.name = data.name1;
      jsonObj1.name = this.dash_watcher[0].name;
      // jsonObj1.email = data.email1;
      jsonObj1.email = this.dash_watcher[0].email;
      // jsonObj1.position= data.position1;
      jsonObj1.position= this.dash_watcher[0].position;
      jsonObjList.push(jsonObj1);

      let jsonObj2 = { name: "", email: "",position:"" };
      // jsonObj2.name = data.name2;
      // jsonObj2.email = data.email2;
      // jsonObj2.position= data.position2;
      jsonObj2.name = this.dash_watcher[1].name;
      jsonObj2.email = this.dash_watcher[1].email;
      jsonObj2.position= this.dash_watcher[1].position;
      jsonObjList.push(jsonObj2);
      this.ruleForm.watcher=JSON.stringify(jsonObjList)
      console.log(this.ruleForm);

      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          axios.put('http://localhost:8089/v1/dashboard/update_duty_schedule/',this.ruleForm).then(function (resp){
            if(resp.data=="1"){
              //写法1
              // _this.$message('修改成功')
              // _this.$router.push("/PageTwo")
              //写法2
              _this.$alert(_this.ruleForm.dutydate+'的值班人员修改成功！','修改成功',{
                confirmButtonText:'确认',
                callback:action=>{
                  _this.$router.push("/PageTwo")
                }
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // mounted(){
    //   const _this=this
    //   alert(this.$route.query.id)
    //   axios.get('http://localhost:8089/schedule/'+this.$route.query.id).then(function(resp){
    //     // console.log(resp)
    //     _this.ruleForm = resp.data
    //     // _this.ruleForm.name1=((JSON.parse(_this.ruleForm.watcher))[0]).name
    //     // _this.ruleForm.email1=((JSON.parse(_this.ruleForm.watcher))[0]).email
    //     // _this.ruleForm.position1=((JSON.parse(_this.ruleForm.watcher))[0]).position
    //     // _this.ruleForm.name2=((JSON.parse(_this.ruleForm.watcher))[1]).name
    //     // _this.ruleForm.email2=((JSON.parse(_this.ruleForm.watcher))[1]).email
    //     // _this.ruleForm.position2=((JSON.parse(_this.ruleForm.watcher))[1]).position
    //   })
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created(){
    const _this=this
    alert(this.$route.query.id)
    axios.get('http://localhost:8089/schedule/'+this.$route.query.id).then(function(resp){
      // console.log(resp)
      _this.ruleForm = resp.data
      _this.dash_watcher=JSON.parse(resp.data.watcher);
      console.log(_this.dash_watcher)
      // _this.ruleForm.name1=((JSON.parse(_this.ruleForm.watcher))[0]).name
      // _this.ruleForm.email1=((JSON.parse(_this.ruleForm.watcher))[0]).email
      // _this.ruleForm.position1=((JSON.parse(_this.ruleForm.watcher))[0]).position
      // _this.ruleForm.name2=((JSON.parse(_this.ruleForm.watcher))[1]).name
      // _this.ruleForm.email2=((JSON.parse(_this.ruleForm.watcher))[1]).email
      // _this.ruleForm.position2=((JSON.parse(_this.ruleForm.watcher))[1]).position
    })
  }
}
</script>

<style scoped>

</style>